<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="controls">
			<!-- 数量控件 -->
			<div class="nd">
				<span>NUMBER OF DISKS</span>
				<input type = 'range' id="numberOfDisks" value='50' min='1' max='100' step='1'/>
			</div>
			<!-- 速度控件 -->
			<div class="sp">
				<span>SPEED</span>
				<input type='range' id="speed" value="10" min='1' max='500' step='10'/>
			</div>
			<div class="di">
				<span>DIRECTION</span>
				<input type='range' id="direction" value="-1" min='-1' max='360' step='10'/>
			</div>
			<!-- 重力控件 -->
			<div class="gr">
				<span>GRAVITY</span>
				<input type='range' id="gravity" value="0" min='0' max='10' step='1'/>
			</div>
			<!-- 半径控件，此控件为select元素与option元素构成的下拉菜单 -->
			<div class="ra">
				<span>RADIUS</span>
				<select id="radius">
					<option value ='5,10'>5 ~ 10</option>
					<option selected value ='10,20'>10 ~ 20</option>
					<option value ='20,50'>20 ~ 50</option>
					<option value ='50,100'>50 ~ 100</option>	
				</select>
			</div>
		</div>
		<canvas id="myCanvas"></canvas>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
